<template>
  <div id="city">
    <div>
      <div class="search_wrap">
        <div class="searchs">
          <i class="fa fa-search" />
          <input placeholder="请输入城市名" type="text" v-model="cityValue" />
        </div>
        <div class="but" @click="handleBtnClick">取消</div>
      </div>
      <div class="location_wrap" v-if="searchList.length ==0">
        <location @click="handlerCity"  :address="city" />
      </div>
    </div>
    <scroll class="content" v-if="searchList.length ==0">
      <city-list  @handlerCity='handlerCity' v-if="Object.keys(cityInfo).length !== 0" :cityInfo='cityInfo' :keys='keys'/>
    </scroll>
    <div v-else>
      <ul>
        <li @click="handlerCity(item)" v-for="(item,index) in searchList">{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import location from "../address/childCnps/location";
import CityList from './childCpns/CityList'
import Scroll from '@/components/scroll/Scroll'
/* import HotCities from './childCpns/HotCities' */
export default {
  name: "city",
  components: {
    location,
   /*  HotCities, */
    CityList,
    Scroll
  },
  data() {
    return {
      cityValue: "",
      cityInfo:{},
      keys:[],
      allCities:[],
      searchList:[]
    };
  },
  created() {
    this.getCityInfo();
  },
  watch: {
    cityValue(){
      this.handlerCityValue()
    }
  },
  computed: {
    city() {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      );
    }
  },
  methods: {
    handleBtnClick() {
      this.$router.back();
    },
    // 数据亲求
    getCityInfo(){
      axios.get('api/posts/cities')
      .then(res=>{
        this.cityInfo=res
        this.hotcities=res.hotCities
        this.keys=Object.keys(res)
        this.keys.pop()
        this.keys.sort()
        // 存储所有的城市
        this.keys.forEach(key=>{
          this.cityInfo[key].forEach(item=>{
            this.allCities.push(item)
          })
        })
      })
    },
    // 获取路由跳转的数据
    handlerCity(city){
      if(city){
        this.$router.push({path:'/address',query:{city:city.name}})
      }else{
        this.$router.push({path:'/address',query:{city:this.city}})
      }
    },
    // 输入框
    handlerCityValue(){
      if(!this.cityValue){
        this.searchList = [];
      }else{
        this.searchList=this.allCities.filter(item=>{
        return item.name.indexOf(this.cityValue) !=-1
      })
      }
    }
  }
};
</script>

<style scoped>
#city {
  overflow: auto;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  /* padding-top: 50px; */
  position:relative;
  z-index: 999;
}
.content{
  /* height: calc(100vh - 105px); */
  position: absolute;
  top: 105px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.search_wrap {
  /*   position: fixed; */
  /*   top: 0; */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 8px 16px;
  background: #ffffff;
  align-items: center;
}

.searchs {
  line-height: 34px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 85%;
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  background-color: #eeeeee;
}

.searchs input {
  display: block;
  height: 32px;
  margin-left: 8px;
  border: none;
  outline: none;
  background: #eeeeee;
}

.search_wrap .but {
  color: #009eef;
}
.location_wrap {
  height: 45px;
  padding: 0 20px;
}

</style>